<!doctype html>

<html>

<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

  <title>Basis Demos: Scroller</title>

  <link rel="stylesheet" type="text/css" title="Compat Style" href="../../style/scrollPanel/default/style.css" media="screen" />
  <link rel="stylesheet" type="text/css" title="Compat Style" href="../../style/pageslider/default/style.css" media="screen" />

  <style type="text/css" id="demo-css">
    HTML,
    BODY
    {
      font-size: small;
      font-family: Tahoma, Verdana, Arial, sans-serif;
    }

    .DemoBlock-Wrapper
    {
      margin-bottom: .5em;
      width: 50%;
      float: left;
    }
    .DemoBlock-Wrapper.short
    {
      width: 25%;
    }


    .DemoBlock
    {
      margin-right: 1ex;

      border: 1px solid #D0D0D0;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
      border-radius: 3px;
      overflow: hidden;
      position: relative;
    }

    .DemoBlock H2
    {
      font-size: 80%;
      font-weight: normal;
      background: #EEE;
      margin: 0;
      padding: 2px;
      text-align: center;
      border-bottom: 1px solid #D0D0D0;
    }

    #WorldMapPanel
    {
      height: 365px;
      cursor: move;
    }

    #CountriesPanel
    {
      border-top: 1px solid #D0D0D0;
      height: 34px;
    }
    #CountriesPanel .Country
    {
      display: inline-block;
      padding: 7px;
      color: #0066CC;
    }
    #CountriesPanel .Country:hover
    {
      color: #6699DD;
      text-decoration: none;
    }

    #BallContainer
    {
      height: 431px;
      position: relative;
      overflow: hidden;
    }

    /* Hor Image Gallery*/
    .HImageGallery
    {
      height: 250px;
    }
    
    .HImageGallery .Basis-ScrollPanel-Content
    {
      height: 100%;
      white-space: nowrap;
    }

    .HImageGallery .ImageItem
    {
      display: inline-block;
      text-align: center;
      width: 150px;
      height: 100%;
      *display: inline;
      zoom: 1;
    }

    .HImageGallery .ImageItem IMG,
    .VImageGallery .ImageItem IMG
    {
      padding: 10px;
      vertical-align: middle;

      border: 1px solid #DDDDDD;

        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
      border-radius: 10px;

      box-shadow: 2px 1px 5px 0 rgba(0, 0, 0, 0.15);
    }
    .HImageGallery .aligner,
    .VImageGallery .aligner
    {
      height: 100%;
      display: inline-block;
      vertical-align: middle;
    }

    .VImageGallery
    {
      height: 250px;
    }

    .VImageGallery .Basis-ScrollPanel-Content
    {
      width: 100%;
    }

    .VImageGallery .ImageItem
    {
      height: 100px;
      text-align: center;
    }

    .ScrollList
    {
      height: 400px;
      width: 100%;
    }

    .ScrollList .Basis-ScrollPanel-Content
    {
      width: 100%;
    }

    .ScrollList-Item
    {

      font-size: 140%;
      padding: 1em;
      border-bottom: 1px solid #EEE;
    }


    .Page-Slider
    {
      height: 400px;
    }
    .Page-Slider .Basis-Page
    {
      background: #DDD;
    }
    .Page-Slider .PageContent
    {
      margin-top: 125px;

      text-align: center;
      font-size: 430%;
      color: white;
      text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
    }
          
  </style>
  <!--[if lt IE 7]>
  <style type="text/css">
    BODY
    {
      font-size: x-small;
    }
  </style>
  <![endif]-->

  <!--[if IE 7]>
  <![endif]-->


  <script type="text/javascript" src="../../basis-all.js"></script>

  <script type="text/javascript" src="../demo.js"></script>
</head>

<body>
  <h1>Basic demos: Scroller</h1>
  
  <p id="demo-summary">
    ..
  </p>
  <div id="demo-description">
    ..
  </div>

  <div id="demo-container"></div>

  <script type="text/javascript" id="demo-javascript">
    
    // import names
    var DOM = basis.dom;
    var Event = basis.dom.event;
    var Data = basis.data;

    var Scroller = basis.ui.scroller.Scroller;
    var ScrollPanel = basis.ui.scroller.ScrollPanel;
    var ScrollGallery = basis.ui.scroller.ScrollGallery;
    var PageSlider = basis.ui.pageslider.PageSlider;
    var uiContainer = basis.ui.Container;

    var nsEntity = basis.entity;
    
    var getter = Function.getter;

    function createBlock(header, cssClassName){
      var demoBlock = DOM.createElement('.DemoBlock', DOM.createElement('H2', header));
      DOM.insert(DOM.get('demo-container'), DOM.createElement('.DemoBlock-Wrapper' + (cssClassName ? '.' + cssClassName : ''), demoBlock));
      return demoBlock;
    }


    //
    // World Map
    //
    var worldMapBlock = createBlock('World Map on ScrollPanel');

    var worldMap = new ScrollPanel({
      id: 'WorldMapPanel',
      container: worldMapBlock,
      content: DOM.createElement('img[src="../res/img/world_map.jpg"][width="3669"][height="1862"]'),

      scrollTo: function(x, y){
        this.scroller.setPosition(x - this.element.offsetWidth / 2, y - this.element.offsetHeight / 2);
      }
    });

    new uiContainer({
      id: 'CountriesPanel',
      container: worldMapBlock,

      childClass: {
        template:
          '<a href="#" class="Country" event-click="scrollTo">{title}</a>',

        binding: {
          title: 'data:Title'
        },

        action: {
          scrollTo: function(){
            worldMap.scrollTo(this.data.PositionX, this.data.PositionY);
          }
        }
      },

      childNodes: [
        { data: { Title: 'Russia', PositionX: 2577, PositionY: 212 } },
        { data: { Title: 'China', PositionX: 2725, PositionY: 551 } },
        { data: { Title: 'Kazakhstan', PositionX: 2342, PositionY: 366 } },
        { data: { Title: 'Ukraine', PositionX: 2027, PositionY: 357 } },
        { data: { Title: 'USA', PositionX: 792, PositionY: 474 } },
        { data: { Title: 'Canada', PositionX: 904, PositionY: 259 } }
      ]
    });

    //
    // Crazy Ball
    //

    /*var block = createBlock('Crazy Ball');
    var ballContainer = DOM.insert(block, DOM.createElement('#BallContainer'));
    var ball = DOM.insert(ballContainer, DOM.createElement('#Ball'));

    new Scroller({
      targetElement: ball,
      handler: {
        updatePosition: function(){
          var x = -this.viewportX;
          var y = -this.viewportY;

          if (x + ball.offsetWidth > ballContainer.offsetWidth || x < 0)
          {
            var fixX = Math.max(0, Math.min(x, ballContainer.offsetWidth - ball.offsetWidth));
            this.viewportTargetX = -fixX;
            this.viewportX = -fixX;
            this.currentVelocityX = -this.currentVelocityX;

          }

          if (y + ball.offsetHeight > ballContainer.offsetHeight || y < 0)
          {
            var fixY = Math.max(0, Math.min(y, ballContainer.offsetHeight - ball.offsetHeight));
            this.viewportTargetY = -fixY;
            this.viewportY = -fixY;
            this.currentVelocityY = -this.currentVelocityY;
          }
        }
      }
    });*/

    //
    // Scroll List
    //

    new ScrollPanel({
      scrollX: false,
      cssClassName: 'ScrollList',
      container: createBlock('Scroll List', 'short'),

      childClass: {
        template: 
          '<div class="ScrollList-Item">{title}</div>',

        binding: {
          title: 'title'
        }
      },

      childNodes: [
        { title: 'List Item 1' },
        { title: 'List Item 2' },
        { title: 'List Item 3' },
        { title: 'List Item 4' },
        { title: 'List Item 5' },
        { title: 'List Item 6' },
        { title: 'List Item 7' },
        { title: 'List Item 8' },
        { title: 'List Item 9' },
        { title: 'List Item 10'},
        { title: 'List Item 11' },
        { title: 'List Item 12' },
        { title: 'List Item 13' },
        { title: 'List Item 14' },
        { title: 'List Item 15' }
      ]
    });

    //
    // Page Slider
    //

    new PageSlider({
      cssClassName: 'Page-Slider',
      container: createBlock('Page Slider', 'short'),

      childNodes: [
        { content: DOM.createElement('.PageContent', 'Page 1') },
        { content: DOM.createElement('.PageContent', 'Page 2') },
        { content: DOM.createElement('.PageContent', 'Page 3') }
      ]
    });

    //
    // Image Gallery
    //

    var ImageGallery = ScrollGallery.subclass({
      cssClassName: 'ImageGallery',
      childClass: {
        template: 
          '<div{content} class="ImageItem" event-click="select">' +
            '<img{image} src=""/>' +
            '<span class="aligner"/>' +
          '</div>',

        templateUpdate: function(){
          this.tmpl.image.src = this.src;
        }
      },

      childTransform: function(child, closeness){
        DOM.setStyle(child.tmpl.image, {
          width: (60 + 40 * closeness) + 'px'
        });
      }
    });

    new ImageGallery({
      scrollX: true,
      container: createBlock('Horizontal Image Gallery', 'short'),
      cssClassName: 'HImageGallery',

      childNodes: [
        { src: 'button.png' },
        { src: 'calendar.png' },
        { src: 'data_index.png' },
        { src: 'dataset.png' },
        { src: 'form.png' },
        { src: 'label.png' },
        { src: 'paginator.png' },
        { src: 'popup.png' },
        { src: 'resizer.png' }
      ]
    });

    new ImageGallery({
      scrollY: true,
      container: createBlock('Vertical Image Gallery', 'short'),
      cssClassName: 'VImageGallery',

      childNodes: [
        { src: 'button.png' },
        { src: 'calendar.png' },
        { src: 'data_index.png' },
        { src: 'dataset.png' },
        { src: 'form.png' },
        { src: 'label.png' },
        { src: 'paginator.png' },
        { src: 'popup.png' },
        { src: 'resizer.png' }
      ]
    });

  </script>
</body>

</html>
